<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisiable"
      title="分析预览"
      width="900px"
      append-to-body
      destroy-on-close
      @open="getTopList"
    >
      <div id="pdf" ref="print" class="print_pdf">
        <div class="page-head">
          <p style="margin-bottom: 0;padding-top: 10px;">焊接与锻热公司</p>
          <el-divider/>
        </div>
        <div id="content" class="page-cont">
          <div id="content_title">
            <h1 style="font-size: 28px;color: #3A71A8;padding-top: 20px;">{{ analysisForm.deptAbb }}-{{analysisForm.title}}-{{analysisForm.month}}</h1>
          </div>
          <div id="content_abstract">
            <h3 class="content_title_label">内容摘要:</h3>
            <p class="content_text">{{analysisForm.month}}，
              {{analysisForm.fullName}}实物质量自主管理情况如下：
              对工艺执行情况检查 <span class="abstract_text">{{analysisForm.technologyReportNumber}}</span> 次，
              发现问题 <span class="abstract_text">{{analysisForm.technologyDefectNumber}}</span> 项，
              考核金额 <span class="abstract_text">{{analysisForm.technologyDefectFine}}</span> 元；
              对文明操作情况检查 <span class="abstract_text">{{analysisForm.physicalReportNumber}}</span> 次，
              发现问题 <span class="abstract_text">{{analysisForm.physicalDefectNumber}}</span> 项，
              考核金额 <span class="abstract_text">{{analysisForm.physicalDefectFine}}</span> 元；
              横向排查清单 <span class="abstract_text">{{analysisForm.listNumber}}</span> 项 ；
              横向排查问题 <span class="abstract_text">{{analysisForm.listDefect}}</span> 项 ；
              以上问题均为 <span class="abstract_text">D</span> 级，
              并及时录入质量管理系统。</p>
          </div>
          <div id="content_abstract">
            <h3 class="content_title_label">问题分类:</h3>
          </div>
          <PieChart
            v-if="show"
            :pieData=pieData
            :options=options
          />
          <div style="padding-top: 24px;padding-bottom: 24px">
            <el-divider/>
            <h3 class="content_title_label">TOP3问题:</h3>
            <el-row :gutter="16" style="padding-top: 18px">
              <el-col :span="8">
                <div class="statistic-card">
                  <el-statistic
                    :value="statisticData[1].value"
                  >
                    <template slot="suffix"> % </template>
                    <template #title>
                      <p>TOP TWO</p>
                      <div class="top_name">
                        {{ statisticData[1].name }}
                      </div>
                    </template>
                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="statistic-card">
                  <el-statistic
                    :value="statisticData[0].value"
                  >
                    <template slot="suffix"> % </template>
                    <template #title>
                      <p>TOP ONE</p>
                      <div class="top_name">
                        {{ statisticData[0].name }}
                      </div>
                    </template>
                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="statistic-card">
                  <el-statistic
                    :value="statisticData[2].value"
                  >
                    <template slot="suffix"> % </template>
                    <template #title>
                      <p>TOP THREE</p>
                      <div class="top_name">
                        {{ statisticData[2].name }}
                      </div>
                    </template>
                  </el-statistic>
                </div>
              </el-col>
            </el-row>
          </div>
          <div>
            <p style="text-align: right;font-size: medium"><br>{{analysisForm.fullName}}</p>
            <p style="text-align: right;font-size: medium">{{analysisForm.date}}</p>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-divider/>
        <el-button type="primary" @click="getNewPdf">下载</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import htmlToPdf from '@/utils/htmlToPdf';
import PieChart from '@/views/dashboard/PieChart.vue';
import { listAnalysisReport } from "@/api/quality/analysis";
import { getThisMonthRange } from '@/utils/dateRange'
import { PaperSizes } from '@/utils/PaperSizes'

export default {
  name: "AnalysisPreview",
  components: { PieChart },
  dicts: ['dept_abbreviation', 'dept_fullname'],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    form:{
      type:Object,
      default:{}
    },
  },
  data(){
    return{
      headerHeight: 80,
      footerHeight: 80,
      pageHeight: 0,
      pageWidth: 0,
      headEl: null, // 页眉
      footEl: null, // 页脚
      homeEl: null, // 封面
      els: [[]], // 合同内容
      totalPage: 0, // pdf总页码
      currentPage: 1,
      analysisForm: {},
      show:false,
      pieData:[],
      options:[
        {
          title:{
            text:'',
            subtext: '其他问题占比小于表中数据，暂未列出',
            //表头位置
            left: 'left',
            show:true,
          }
        }
      ],
      statisticData:[
        {name:"暂无",value:"0"},
        {name:"暂无",value:"0"},
        {name:"暂无",value:"0"},
      ],
      dateRangeReportDate:[],
      queryParams:{
        params:{
          beginReportDate:"",
          endReportDate:""
        }
      },
    }
  },
  mounted() {
    // 初始化
    this.init();
  },
  methods:{
    cancel() {
      this.dialogVisiable = false;
      this.show = false;
    },

    init() {
      this.generatePdfInstance = this.$generatePdfFile({
        headerHeight: this.headerHeight,
        footerHeight: this.footerHeight,
      });
      this.pageHeight = this.generatePdfInstance.options.a4H;
      this.pageWidth = this.generatePdfInstance.options.a4W;
    },

    getEls() {
      this.headEl = this.$refs.print.querySelector(".page-head");
      this.footEl = this.$refs.print.querySelector(".page-foot");
      this.homeEl = null;
      let part1El = this.$refs.print.querySelectorAll(".page-cont");
      this.els = [part1El];
      return {
        headEl: this.headEl,
        footEl: this.footEl,
        homeEl: this.homeEl,
        pagesEl: this.els,
        homeHeaderFlag: false,
        homeFooterFlag: false,
        pagesHeaderFlag: true,
        pagesFooterFlag: true,
      };
    },

    async getPdf(){
      let elsOptions = this.getEls();
      let info = await this.generatePdfInstance.generateFile(elsOptions);
      this.$modal.msgSuccess("即将开始下载文件，请稍等");
      this.generatePdfInstance.exportFile(this.content.title);
      this.generatePdfInstance.resetFile();
      this.$refs.print.querySelector("#pageNumber").innerHTML = "1";
    },

    async getNewPdf(){
      this.$modal.msgSuccess("即将开始下载文件，请稍等");
      const title = this.analysisForm.deptAbb+"-"+this.analysisForm.title+"-"+this.analysisForm.month
      htmlToPdf.getPdf(this.$refs.print,{
        title:title,
        paper:PaperSizes.A4
      });
    },

    reset(){
      this.analysisForm = {};
      this.show = false;
      this.pieData = [];
      this.dateRangeReportDate = [];
      this.statisticData = [
        {name:"暂无",value:"0"},
        {name:"暂无",value:"0"},
        {name:"暂无",value:"0"},
      ];
    },

    /** 质量问题序号 */
    rowDefectIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },

    getTopList(){
      this.queryParams.deptAbbreviation = this.analysisForm.deptAbbreviation;
      const date = new Date(Date.parse(this.analysisForm.analysisMonth));
      this.dateRangeReportDate = getThisMonthRange(date);
      if (null != this.dateRangeReportDate && '' !== this.dateRangeReportDate) {
        this.queryParams.params["beginReportDate"] = this.dateRangeReportDate[0];
        this.queryParams.params["endReportDate"] = this.dateRangeReportDate[1];
      }
      listAnalysisReport(this.queryParams).then(res => {
        const result = res.data;
        const pieList = result[0].pieList;
        if (null !== pieList && '' !==pieList){
          this.pieData = Object.freeze(pieList);
          this.show = true;
        }
        const topList = result[1].topList;
        this.statisticData = [
          {name:"暂无",value:"0"},
          {name:"暂无",value:"0"},
          {name:"暂无",value:"0"},
        ];
        for (const topListKey in topList) {
          this.statisticData[topListKey] = Object.freeze(topList[topListKey]);
        }
      });
    }
  },
  watch:{
    dialogVisiable:{
      handler(newVal, oldVal) {
        if (newVal){
          this.reset();
          this.analysisForm = Object.freeze(this.form);
        }else {
          this.show = false;
          this.pieData = null;
        }
      },
    }
  },
  computed: {
    dialogVisiable: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-dialog__body {
  padding-top: 10px;
  padding-bottom: 10px;
}

::v-deep .el-divider--horizontal {
  margin-top: 0;
}

//打印样式
@media print {
  //不打印页脚的链接  --放在样式中
  @page {
    margin-top: 1mm;
    margin-bottom: 1mm;
    padding-top: 1mm;
  }
  //重要
  ::v-deep #app .content-container {
    width: 100% !important;
    // height: 100% !important;
    padding: 0 !important;
    // margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  //重要
  ::v-deep #app .main-container {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}
</style>
<style>

.page-head {
  margin-bottom: 0;
  padding-left: 40px;
  padding-right: 40px;
}

.page-cont{
  padding-left: 40px;
  padding-right: 40px;
}

.page-foot {
  padding-left: 40px;
  padding-right: 40px;
}

.content_title_label{
  font-size: large;
  padding-top: 20px;
  color: rgba(96,146,175,0.98);
  text-align: left;
}

.content_text{
  text-align: left;
  text-indent:2em;
  font-size: medium;
  line-height: 30px
}

.abstract_text{
  font-size: 20px;
  padding-top: 20px;
  color: rgb(2, 160, 255);
  text-align: left;
}

.print_pdf{
  width: 840px;
  text-align: center;
  margin: auto;
  /*padding-right: 40px;*/
  /*padding-left: 40px;*/
}

.top_name{
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  font-weight: 540;
  padding-bottom: 6px;
}
</style>
